<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>读者杂志</title>
        <link th:href="@{/img/web_icon.png}" rel="icon" type="image/x-icon">

        <!-- Bootstrap Icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
        <!-- Google fonts-->
        <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
        <!-- SimpleLightbox plugin CSS-->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.css" rel="stylesheet" />
        <!-- Core theme CSS (包括 Bootstrap)-->
        <link th:href="@{/css/styles.css}" rel="stylesheet" />
        <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
        <link th:href="@{/css/web_tips.css}" rel="stylesheet" type="text/css">
    </head>
    <body id="page-top">
        <!-- Navigation-->
        <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
            <div class="container px-4 px-lg-5">
                <a class="navbar-brand" href="#page-top">读者杂志</a>
                <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ms-auto my-2 my-lg-0">
<!--                        <li class="nav-item"><a class="nav-link" target="_blank" href="/admin/listUsers">临时按钮：前往我的主页</a></li>-->
<!--                        <li class="nav-item"><a style="line-height: 32px;" class="nav-link" target="_blank" href="/userPage/index">临时按钮：前往我的主页</a></li>-->
<!--                        <li class="nav-item"><a style="line-height: 32px;" class="nav-link" target="_blank" href="/userPage/myArticle">前往我的投稿</a></li>-->
                        <li th:if="${user!=null and user?.getDept().getId()!=6}" class="nav-item">
                            <a style="line-height: 32px;" class="nav-link" target="_blank" href="/">前往管理后台</a>
                        </li>
<!--                        <li class="nav-item"><a class="nav-link" target="_blank" href="/submission/index"></a></li>-->
                        <li class="nav-item"><a style="line-height: 32px;" class="nav-link" href="#about">关于</a></li>
                        <li th:style="${user}==null?'line-height: 32px;':'display: none;'" class="nav-item"><a class="nav-link" href="/login">登录</a></li>
                        <li th:style="${user}==null?'line-height: 32px;':'display: none;'" class="nav-item"><a class="nav-link" href="/register">注册</a></li>
                        <li th:if="${user}!=null" class="nav-item">
                            <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span th:text="${user.nickname}" class="mr-2 d-none d-lg-inline text-gray-600 small">用户名</span>
                                <img class="img-profile rounded-circle ml-2" width="32" height="32"
                                     th:src="@{'/system/user/picture?p='+${user.picture}}">
                            </a>
                            <!-- Dropdown - User Information -->
                            <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                                 aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="/userPage/myPage" target="_blank">
                                    <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                    我的首页
                                </a>
                                <a class="dropdown-item"  href="/userPage/myArticle" target="_blank">
                                    <i class="fas fa-book fa-sm fa-fw mr-2 text-gray-400"></i>
                                    我的投稿
                                </a>
                                <div class="dropdown-divider"></div>
                                <a  href="/logout" class="dropdown-item">
                                    <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                    退出登录
                                </a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--    网站通知-->
        <div class="tips_wrapper" style="position: absolute;right: 50px;z-index: 999;">
<!--            这部分改用ajax改写-->
            <!--        <div class="tips_container">-->
            <!--            <div class="rectangle mb-1">-->
            <!--                <div class="notification-text">-->
            <!--                    <i class="fa fa-bell mr-1"></i>-->
            <!--                    <span class="border-4" id="Web_Tips_Title">Title</span>-->
            <!--                    <span id="Web_Tips_Body">&nbsp;&nbsp;This is a test notification.</span>-->
            <!--                </div>-->
            <!--                <button onclick="closeTips();" class="btn btn-sm">-->
            <!--                    <span class="fa fa-window-close text-light"></span>-->
            <!--                </button>-->
            <!--            </div>-->
            <!--        </div>-->
        </div>
        <!-- Masthead-->
        <header class="masthead">
<!--            就先不播放视频了-->
<!--            <video id="background_video" loop muted>-->
<!--                <source th:src="@{/static/videos/index_video.mp4}" type="video/mp4" src="/static/videos/index_video.mp4">-->
<!--            </video>-->
            <div class="container px-4 px-lg-5 h-100">
                <div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
                    <div class="col-lg-8 align-self-end">
                        <h1 class="text-white font-weight-bold">读者</h1>
                        <h2 class="text-white">中国人的心灵读本</h2>
                        <hr class="divider" />
                    </div>
                    <div class="col-lg-8 align-self-baseline">
                        <p class="text-white-75 mb-5">来自1980年</p>
                        <p class="text-white-75 mb-1">博彩中外 荟萃精华</p>
                        <p class="text-white-75 mb-5">启迪思想 开阔眼界</p>
                        <a class="btn btn-primary btn-xl" target="_blank" href="/submission/index">我要投稿</a>
                    </div>
                </div>
            </div>
        </header>
        <!-- About-->
        <section class="page-section bg-primary" id="about">
            <div class="container px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-lg-8 text-center">
                        <h2 class="text-white mt-0">关于我们</h2>
                        <hr class="divider divider-light" />
                        <p class="text-white-75 mb-4">读者(www.duzhe.com)创立于1981年4月，
                            是国内领先的原创文学网站，隶属于引领行业的正版数字阅读平台和文学IP培育平台——
                            北京读者天元文化有限公司旗下。读者以推动中国原创文学事业为宗旨，长期致力于原创文学作者的
                            挖掘与培养，并取得了巨大成果：

                        </p>
                        <a class="btn btn-light btn-xl" href="#services">加入我们！</a>
                    </div>
                </div>
            </div>
        </section>
        <!-- 网站介绍 -->
        <section class="page-section" id="services">
<!--            容器-->
            <div class="container px-4 px-lg-5">
                <h2 class="text-center mt-0">为什么选择我们？</h2>
                <hr class="divider" />
<!--                第一排-->
                <div class="row gx-4 gx-lg-5">
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <div class="mb-2"><i class="fa fa-camera-retro fa-5x text-primary"></i></div>
                            <h3 class="h4 mb-2">在这里</h3>
                            <p class="text-muted mb-0">我们打造中国人心灵读本</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <div class="mb-2"><i class="fa fa-flag fa-5x text-primary"></i></div>
                            <h3 class="h4 mb-2">在这里</h3>
                            <p class="text-muted mb-0">我们选择优秀中华文化</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <div class="mb-2"><i class="fa fa-paper-plane fa-5x text-primary"></i></div>
                            <h3 class="h4 mb-2">在这里</h3>
                            <p class="text-muted mb-0">我们塑造健康价值观</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <div class="mb-2"><i class="fa fa-users fa-5x text-primary"></i></div>
                            <h3 class="h4 mb-2">在这里</h3>
                            <p class="text-muted mb-0">我们感受中华风度</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 某些图片展示 -->
        <div id="portfolio">
            <div class="container-fluid p-0">
                <div class="row g-0">
                    <div class="col-lg-4 col-sm-6">
                        <a class="portfolio-box" th:href="@{/assets/img/portfolio/fullsize/1.jpg}" title="Project Name">
                            <img class="img-fluid" th:src="@{/assets/img/portfolio/thumbnails/1.jpg}" alt="..." />
                            <div class="portfolio-box-caption">
                                <div class="project-category text-white-50">19834月</div>
                                <div class="project-name">读者发行量超过100万</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a class="portfolio-box" th:href="@{/assets/img/portfolio/fullsize/2.jpg}" title="Project Name">
                            <img class="img-fluid" th:src="@{/assets/img/portfolio/thumbnails/2.jpg}" alt="..." />
                            <div class="portfolio-box-caption">
                                <div class="project-category text-white-50">1993年7月</div>
                                <div class="project-name">读者文摘更名为读者</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a class="portfolio-box" th:href="@{/assets/img/portfolio/fullsize/3.jpg}" title="Project Name">
                            <img class="img-fluid" th:src="@{/assets/img/portfolio/thumbnails/3.jpg}" alt="..." />
                            <div class="portfolio-box-caption">
                                <div class="project-category text-white-50">2000年1月</div>
                                <div class="project-name">读者改为半月刊</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a class="portfolio-box" th:href="@{/assets/img/portfolio/fullsize/4.jpg}" title="Project Name">
                            <img class="img-fluid" th:src="@{/assets/img/portfolio/thumbnails/4.jpg}" alt="..." />
                            <div class="portfolio-box-caption">
                                <div class="project-category text-white-50">2006年4月</div>
                                <div class="project-name">读者月发行量突破1000万册</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a class="portfolio-box" th:href="@{/assets/img/portfolio/fullsize/5.jpg}" title="Project Name">
                            <img class="img-fluid" th:src="@{/assets/img/portfolio/thumbnails/5.jpg}" alt="..." />
                            <div class="portfolio-box-caption">
                                <div class="project-category text-white-50">2019年6月</div>
                                <div class="project-name">读者累计发行量突破20亿册</div>
                            </div>
                        </a>
                    </div>
                    <div class="col-lg-4 col-sm-6">
                        <a class="portfolio-box" th:href="@{/assets/img/portfolio/fullsize/6.jpg}" title="Project Name">
                            <img class="img-fluid" th:src="@{/assets/img/portfolio/thumbnails/6.jpg}" alt="..." />
                            <div class="portfolio-box-caption p-3">
                                <div class="project-category text-white-50">2021年4月</div>
                                <div class="project-name">读者创刊40周年</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Call to action-->
        <section class="page-section bg-dark text-white">
            <div class="container px-4 px-lg-5 text-center">
                <h3 class="mb-4">用画笔展现真、善、美是我一直秉承的创作理念。
                    </h3>
                <a class="btn btn-light btn-xl" href="#">加入我们!</a>
            </div>
        </section>
        <!-- Contact-->
        <section class="page-section" id="contact">
            <div class="container px-4 px-lg-5">
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-lg-8 col-xl-6 text-center">
                        <h2 class="mt-0">关于读者</h2>
<!--                        添加一个短横线-->
                        <hr class="divider" />
                        <p class="text-muted mb-5">《读者》杂志创办于1981年，是甘肃人民出版社主办的综合类文摘杂志。创刊40年来，
                            《读者》杂志在海内外亿万读者中产生了深远的影响，具有很高知名度和美誉度，被誉为“中国人的心灵读本”、“中国
                            期刊第一品牌”。现品牌价值达370亿元，列国内杂志第一位。<br>
                            《读者》始终坚持“博采中外、荟萃精华、启迪思想、开阔眼界”的办刊宗旨和“高雅、清新、隽永”的办刊风格，发掘人
                            性中的真善美，体现人文关怀。在刊物内容及形式方面追求高品位、高质量，力求精品，并以形式和内容的丰富性及多样
                            性，赢得了各个年龄段和不同阶层读者的喜爱。


                            !</p>
                    </div>
                </div>
<!--                <div class="row gx-4 gx-lg-5 justify-content-center mb-5">-->
<!--                    <div class="col-lg-6">-->
<!--                        -->
<!--                    </div>-->
<!--                </div>-->
                <div class="row gx-4 gx-lg-5 justify-content-center">
                    <div class="col-lg-4 text-center mb-5 mb-lg-0">
                        <i class="fa fa-book-open mb-3 text-muted"></i>
                        <div>  面对东方与西方，过去与未来，传承与创新，任何时候都不该独守一端，只有真切理解融合的要义，才能创作出具有丰富内涵和艺术张力的优秀作品。</div>
                    </div>
                </div>
            </div>
        </section>
        <!-- Footer-->
        <footer class="bg-light py-5">
            <div class="container px-4 px-lg-5"><div class="small text-center text-muted">Copyright &copy; 2021 - Company Name</div></div>
        </footer>

        <!-- Bootstrap core JavaScript-->
        <script th:src="@{/vendor/jquery/jquery.min.js}"></script>
        <script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>
<!--        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/SimpleLightbox/2.1.0/simpleLightbox.min.js"></script>
        <script th:src="@{/js/scripts.js}"></script>
        <!--关闭弹出通知-->
        <script>
            function closeTips() {
                $('.tips_wrapper').remove();
            }
            function getWebTipsByID(id) {

                $.ajax({
                    url:"/system/webTips/get/"+id,
                    type:"get",
                    data:{
                        id:$("#Web_Tips_Body").val(),
                    },
                    success:function(data){
                        console.log(data["webTips"]);
                        //console.log(data["webTips"].title);
                        $(".tips_wrapper").html('        <div class="tips_container">\n' +
                            '            <div class="rectangle mb-1">\n' +
                            '                <div class="notification-text">\n' +
                            '                    <i class="fa fa-bell mr-1"></i>\n' +
                            '                    <span class="border-4 mr-1 ml-1">&nbsp;'+data["webTips"].title+'</span>\n' +
                            '                    <span>&nbsp;&nbsp;'+data["webTips"].content+'</span>\n' +
                            '                </div>\n' +
                            '                <button onclick="closeTips();" class="btn btn-sm">\n' +
                            '                    <span class="fa fa-window-close text-light"></span>\n' +
                            '                </button>\n' +
                            '            </div>\n' +
                            '        </div>');
                        // $("#Web_Tips_Title").html(data["webTips"].title);
                        // //console.log(data["webTips"].content);
                        // $("#Web_Tips_Body").html(data["webTips"].content);
                    }
                })
            }
            (function (){
                getWebTipsByID(1);
            }());
        </script>
    </body>
</html>
